<template>
	<view class="mainpadding2">
		<view class="mainpadding_top radius" style="background-color: #fbf6f1;">
			<view class="flexbetween">
				<view class="flexleft" v-if="!shop_id">
					<view class=" titletext hei_text" style="max-width: 500rpx;">{{userInfo.nickname}}</view>
					<view class="xiaohei">（**{{userInfo.username[userInfo.username.length-1]}}）</view>
				</view>
				<view class="flexleft" v-if="shop_id">
					<view class=" titletext hei_text" style="max-width: 500rpx;">{{userInfo.name}}</view>
				</view>
				<image  v-if="!shop_id" :src="imgUrl + userInfo.avatar" style="width: 100rpx;height: 100rpx;" class="radius1" mode=""></image>
				<image  v-if="shop_id" :src="userInfo.logoimage_text" style="width: 100rpx;height: 100rpx;" class="radius1" mode=""></image>
			</view>
			<view class="xiaohei margin_top6">可用點數：{{allMoney}}</view>
			<view class="xiaohei margin_top6">轉帳點數</view>
			<view class="flexleft margin_top">
				<view class="titletext hei_text bold margin_right">$</view>
				<input type="number" v-model="money" class="titletext hei_text bold" style="font-size: 60rpx;" name=""
					id="">
			</view>
			
		</view>
	
		<view class="posibottom mainpadding">
			<view class="submitbtn" @click="pay">確認付款</view>
		</view>

		<u-popup :show="passwordshow" @close="close">
			<view class="page">
				<view>
					<view class="pay-title">
						<text>請輸入6位支付密碼</text>
					</view>
					<view class="pay-password">
						<view class="list">
							<text v-show="passwordArr.length >= 1">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 2">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 3">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 4">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 5">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 6">●</text>
						</view>
					</view>
					<view class="hint" v-show="errtext">
						<text>{{errtext}}</text>
					</view>
				</view>
				<!-- ref:唯一ref  passwrdType：密碼样式pay keyInfo：密碼輸入返回事件 -->
				<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay"  @KeyInfo="KeyInfo"></cc-defineKeyboard>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				shou_id: "",
				paraString: "",
				userInfo: {},
				money: "",
				passwordArr: [],
				passwordshow:false,
				errtext:"",
				shop_id:"",
				allMoney:""
			}
		},
		onLoad(options) {
			this.paraString = window.location.href //还可以  window.location.search.substring()
			this.shou_id = this.getQueryVariable('id') //code是url後面带的
			if(this.getQueryVariable('shop_id')){
				this.shop_id = this.getQueryVariable('shop_id')
			}
			this.getInfo()
			this.getlist()
		},
		methods: {
			getlist() { //獲取個人信息
				let _this = this
				let url = "/api/member/zcgl"
				this.http.request(url, 'POST', {}).then(res => {
					this.allMoney = res.data.money
				})
			},
			getQueryVariable(variable) {
				var query = this.paraString;
				var rooms = query.split('?');
				for (var i = 0; i < rooms.length; i++) {
					var pair = rooms[i].split('=');
					if (pair[0] == variable) {
						return (pair[1].split('&'))[0]
					}
				}
				//或者拼接&後面的值
				var vars = query.split('&')
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split('=')
					if (pair[0] == variable) {
						return pair[1]
					}
				}
			},
			async getInfo() {
				if(!this.shop_id){
					let res = await this.http.request('/api/member/getuser', 'POST', {
						id:this.shou_id
					})
					this.userInfo = res.data
				}else{
					let res = await this.http.request('/api/shop/shop', 'POST', {
						shop_id: this.shop_id
					})
					this.userInfo = res.data
				}
				
			},
			pay() {
				if(this.money==""){
					this.http.toast("請输入付款金額")
					return false
				}
				this.passwordshow = true
				setTimeout(()=>{
					this.$refs.CodeKeyboard.show();
				},200)
			},
			KeyInfo(val) {
				// 判断是否輸入的是刪除键
				if (val.keyCode === 8) {
					// 刪除不可超過後一位
					this.passwordArr.splice(val.index + 1, 1)
					return false
				}
				if (this.passwordArr.length==6){
					return false;
				}
				// 判断是否輸入的是.
				if (val.keyCode == 190) {
					// 輸入.无效
				} else {
					this.passwordArr.push(val.key);
					if(this.passwordArr.length==6){
						this.panduanmm()
					}
				}
			},
			panduanmm(){
				let text = ""
				this.errtext = ""
				this.passwordArr.forEach(item=>{
					text = text+item.toString()
				})
				this.http.request("/api/member/yzpaypass", 'POST', {
					paypass:text
				}).then(res=>{
					if(res.code==1){
						this.submit()
					}else{
						this.errtext = res.msg
					}
				})
			},
			submit() {
				this.close()
				
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				if(!this.shop_id){
					this.http.request("/api/pay/sao_pay", 'POST', {
						money: this.money,
						fu_id: uni.getStorageSync("user_id"),
						shou_id:this.shou_id,
					}).then(res=>{
						uni.hideLoading()
						
						if(res.code==1){
							this.http.toast("支付成功")
							setTimeout(()=>{
								uni.reLaunch({
									url:"/pages/mine/mine"
								})
							},500)
						}else{
							this.http.toast(res.msg)
						}
					})
				}else{
					this.http.request("/api/user/payShop", 'GET', {
						price: this.money,
						shop_id:this.shop_id,
					}).then(res=>{
						uni.hideLoading()
						if(res.code==1){
							this.http.toast("支付成功")
							setTimeout(()=>{
								uni.reLaunch({
									url:"/pages/mine/mine"
								})
							},500)
						}else{
							this.http.toast(res.msg)
						}
					})
				}
				
			},
			close(){
				this.$refs.CodeKeyboard.hide();
				this.passwordshow = false
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xiankuans {
		max-width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.line {
		width: 2rpx;
		height: 50rpx;
		background-color: #999;
	}

	$base: orangered; // 基础颜色

	

	.pay-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;

		text {
			font-size: 28rpx;
			color: #555555;
		}
	}

	.pay-password {
		display: flex;
		align-items: center;
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		border: 2rpx solid $base;

		.list {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 16.666%;
			height: 100%;
			border-right: 2rpx solid #EEEEEE;

			text {
				font-size: 32rpx;
			}
		}

		.list:nth-child(6) {
			border-right: none;
		}
	}

	.hint {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 70rpx;

		text {
			font-size: 28rpx;
			color: $base;
		}
	}
</style>